import React from 'react'
import { List, Rate, Space, Image, Tag, Typography } from 'antd'
import { Link } from 'react-router-dom'
import { StarOutlined, LikeOutlined } from '@ant-design/icons'
const { Text } = Typography

const list = [
	{
		id: '1',
		title: 'Title 1',
		description: 'Description 1',
		departureCity: 'City 1',
		travelDays: 5,
		discountPresent: true,
		tripType: 'Type 1',
		touristRoutePictures: [
			{
				url: 'https://www.baidu.com/img/flexible/logo/pc/result.png'
			}
		],
		price: 100,
		originalPrice: 200,
		rating: 4.5
	},
	{
		id: '2',
		title: 'Title 2',
		description: 'Description 2',
		departureCity: 'City 2',
		travelDays: 3,
		discountPresent: false,
		tripType: 'Type 2',
		touristRoutePictures: [
			{
				url: 'https://www.baidu.com/img/flexible/logo/pc/result.png'
			}
		],
		price: 200,
		originalPrice: 300,
		rating: 4.2
	}
]
const listData = (productList: any[]) =>
	productList.map((p) => ({
		id: p.id,
		title: p.title,
		description: p.description,
		tags: (
			<>
				{p.departureCity && <Tag color="#f50">{p.departureCity}出发</Tag>}
				{p.travelDays && <Tag color="#108ee9">{p.travelDays} 天 </Tag>}
				{p.discountPresent && <Tag color="#87d068">超低折扣</Tag>}
				{p.tripType && <Tag color="#2db7f5">{p.tripType}</Tag>}
			</>
		),
		imgSrc: p.touristRoutePictures[0].url,
		price: p.price,
		originalPrice: p.originalPrice,
		discountPresent: p.discountPresent,
		rating: p.rating
	}))

const IconText = ({ icon, text }) => (
	<Space>
		{React.createElement(icon)}
		{text}
	</Space>
)

export default function ListDemo() {
	return (
		<List
			itemLayout="vertical"
			size="large"
			pagination={false}
			dataSource={listData(list)}
			footer={false}
			renderItem={(item) => (
				<List.Item
					key={item.title}
					actions={[
						// 收藏
						<IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
						// 点赞
						<IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
						// 评分
						<Space>
							<Rate defaultValue={3} />
							<Text strong className="ant-rate-text">
								{item.rating}
							</Text>
						</Space>
					]}
					// 图片
					extra={<Image width={272} height={172} alt="image" src={item.imgSrc} />}>
					<List.Item.Meta
						title={
							<>
								{item.discountPresent ? (
									<Space>
										<Text style={{ fontSize: 20, fontWeight: 400 }} delete>
											¥ {item.originalPrice}
										</Text>
										<Text type="danger" style={{ fontSize: 20, fontWeight: 400 }}>
											¥ {item.price}
										</Text>
									</Space>
								) : (
									<Text style={{ fontSize: 20, fontWeight: 400 }}>¥ {item.price}</Text>
								)}
								<Link to={'/detail/' + item.id}> {item.title}</Link>
							</>
						}
						description={item.tags}
					/>
					{item.description}
				</List.Item>
			)}
		/>
	)
}
